<template>
  <div class="time-box">
<!--    <div>时间轴</div>-->
    <div id="time-line">
    <v-timeline  class="scrollable-timeline" style="color: #fff">
        <v-timeline-item
          v-for="(item, index) in timeLintDate"
          :key="index"
          :class="[`${item.group}-dot`]"
          :style="{
            flexDirection: item.group !== 'red' ? 'row-reverse' : 'row',
          }"
        >
          <v-card :color="item.group">
            <v-card-text
              class="content"
              style="white-space: pre-line; color: white"
              :style="{
                textAlign: item.group === 'red' ? 'end' : 'left',
              }"
            >
              <strong style='color: #ffd180;  direction: ltr;'>{{ formatTimestamp(item.timestamp) }}</strong>
              <div>{{ item.note }}</div>
            </v-card-text>
          </v-card>
        </v-timeline-item>
      </v-timeline>
    </div>
  </div>
</template>
<script>
export default {
  name: "timeLine",
  //   props: ["timeLintDate"],
  props: {
    timeLintDate:{
      type: Array,
    }
  },
  mounted() {
    // this.$v
  },
  computed: {
    // timeLintDate() {
    //   return this.$store.getters.timeLineDate;
    // },
  },
  methods: {
    formatTimestamp(timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }
  }
};
</script>

<style scoped>
.time-box {
  position: absolute;
  /* top 控制 组件距离顶部的距离, 60不用变, */
  top: 310px;
  /* left 控制到左侧的距离，放到右侧的话left改为right */
  left: 80px;
  /* height 通过calc 计算得到 */
  /*  减掉的 60px 是 顶部的高度 */
  height: calc(100vh - 250px);
  max-height: calc(100vh - 400px);
  overflow-y: scroll;
  direction: rtl;
  z-index: 100;
  /* width 宽度可以不设置，注销掉，根据内容自己撑开 */
   width: 470px;
  /* color: #000; */
  scrollbar-width: none; /* 隐藏滚动条 适用于火狐的，谷歌也生效了！！！？？？ */
}

#time-line {
}
/*时间轴竖线样式
#time-line .theme--light.v-timeline::before {
  background: #ffffff !important;
  position: absolute;
  left: calc(50% - 1px);
  z-index: 2;
  opacity: 1;
  height: 95%;
}
*/
/**
时间轴竖线
 */
#time-line .scrollable-timeline :deep(.v-timeline-divider__before),
#time-line .scrollable-timeline :deep(.v-timeline-divider__after)
{
  background-color: #ffffff !important;
}
#time-line .scrollable-timeline :deep(.v-timeline-divider__inner-dot){
  background: #e59324;

}
/* 红色组的小球样式 */
.scrollable-timeline :deep(.red-dot .v-timeline-divider__inner-dot) {
  background: #ff0000 !important;
}
/* 蓝色组的小球样式 */
.scrollable-timeline :deep(.blue-dot .v-timeline-divider__inner-dot) {
  background: #0d10d2 !important;
}

/* #time-line .v-card {
  background-color: #ff9e80 !important;
  background-color: black;
  border-radius: 5px;
  border: 1px solid wheat;
} */

/**
 #time-line .v-timeline-item:nth-child(4) :deep(.v-timeline-item__dot) {
  background-color: #ff9e80 !important;
}
*/

/*标题部分，暂时没用*/
#time-line .v-timeline-item .text-color {
  font-weight: 600;
  color: #ffd180;
  font-size: small;
}

/* #time-line .v-timeline-item .text-color {
  font-weight: 600;
  color: #bf360c;
}
#time-line .v-timeline-item .v-card {
  background-color: #ffd1804d !important;
} */

/*时间轴两边浅红色卡片窗口样式*/
#time-line .v-timeline-item .v-card {
  background-color: #bf360c4d !important;
  border: #BF360C solid 1px  !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#time-line .v-timeline-item__body > .v-card:not(.v-card--flat):after {
  display: contents;
  background: transparent;
}
#time-line .v-timeline-item__body > .v-card:not(.v-card--flat):before {
  display: contents;
  background: transparent;
}
/* #time-line .v-card .v-sheet .theme--light::before {
    display: contents;
} */
/* .time-box::-webkit-scrollbar {
    width: 15px;
    background-color: transparent
}
.time-box::-webkit-scrollbar-track {
    background-color: transparent;
}
.time-box::-webkit-scrollbar-thumb {
    background-color: transparent;
} */


</style>
